<template>
	<div class="home">
		<header>
			<Header></Header>
			<ly-tab v-model="selectedId" @change='changeTab' :items="items" :options="options">
			</ly-tab>
		</header>
		<section ref='wrapper'>
			<div>
				<div v-for='(item,index) in newData' :key='index'>
					
					<Swiper v-if="item.type=='swiperList'" :list='item.data'></Swiper>

					<Icons v-if="item.type=='iconsList'" :list='item.data'></Icons>

					<Like v-if="item.type=='likeList'" :list='item.data'></Like>

				</div>
			</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script type="text/javascript">
	import Tabbar from '@/components/common/Tabbar.vue'
	import Header from '@/components/home/Header.vue'
	import Swiper from '@/components/home/Swiper.vue'
	import Icons from '@/components/home/Icons.vue'
	import Like from '@/components/home/Like.vue'
	import BetterScroll from 'better-scroll'
	import http from '@/common/api/request.js'

	export default {
		components: {
			Tabbar,
			Header,
			Swiper,
			Icons,
			Like,
		},
		data() {
			return {
				lBetterScroll:'',
				rBetterScroll:'',
				selectedId: 0,
				items: [],
				newData: [],
				options: {
					activeColor: '#b0352f'
					// 可在这里指定labelKey为你数据里文字对应的字段
				},
			}
		},
		created() {
			this.getData();
		},
		methods: {
			async getData() {//请求展示数据
			
				let res = await http.$axios({
					url:'/api/index_list/0/data/1'
				})
				
				this.items = Object.freeze(res.topBar);
				this.newData = Object.freeze(res.data);
			
				this.lBetterScroll = this.$nextTick(()=>{
					new BetterScroll(this.$refs.wrapper,{
						movable:true,
						zoom:true,
						// bounce:false
					})
				})
				
			},

			async changeTab(item, index) {//切换(推荐、大红袍)
				let res = await http.$axios({
					url:'/api/index_list/' + index + '/data/1'
				})

				if (res.constructor == Array) {
					this.newData = Object.freeze(res);
				} else {
					this.newData = Object.freeze(res.data);
				}

				this.rBetterScroll = this.$nextTick(()=>{
					new BetterScroll(this.$refs.wrapper,{
						movable:true,
						zoom:true,
						// bounce:false
					})
				})

			}

		}
	}
</script>

<style scoped>
	.home {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	section {
		flex: 1;
	}
</style>
